<template>
<section class="brand-list-box">

    <aside class="swiper-box"
    :style="{'height':height}"
    v-swiper:logoSwiper="sw_params.logoOption"
    @mouseenter="on_bot_enter" @mouseleave="on_bot_leave"
    ref="mySwiper">
      <div class="swiper-wrapper" v-if="!type_flag">
         <a
         href="#"
         :key="index"
         v-for="(item,index) of sw_params.data"
         class="swiper-slide brand-list">
          <img :src="item.url" >
         </a>
         <!--<div class="swiper-slide brand-list">2</div> -->
        <!-- <nuxt-link class="swiper-slide brand-list" to="https://router.vuejs.org/api/#exact-active-class">ces</nuxt-link> -->

      </div>
      <div class="swiper-wrapper" v-if="type_flag">
         <a
         href="#"
         :key="index"
         v-for="(item,index) of sw_params.data"
         :style="{'height':height,'background-image':'url('+item.url+')','background-position':'center center','background-repeat':'no-repeat'}"
         class="swiper-slide brand-list">
         </a>
         <!--<div class="swiper-slide brand-list">2</div> -->
        <!-- <nuxt-link class="swiper-slide brand-list" to="https://router.vuejs.org/api/#exact-active-class">ces</nuxt-link> -->

      </div>
      <div v-if="sw_params.logoOption.pagination!=undefined" class="swiper-pagination"></div>
    </aside>

</section>
</template>

<script>
export default{
  data() {
    return {
      //sw_params形式
      // sw_params:{
      //   logoOption: {
      //         loop: true,
      //         navigation: {
      //           nextEl: '.swiper-button-next',
      //           prevEl: '.swiper-button-prev'
      //         },
      //         pagination: {
      //           el: '.swiper-pagination',
      //           clickable: true,
      //         },
      //         autoplay: {
      //           delay: 1000,
      //         }
      //   },
      //   data:[
      //     {
      //       url:''
      //     }
      //   ]
      // }
    }
  },
  props:{
    sw_params:{//swiper相关参数
      type:Object
    },
    height:{//高度设置 - 用于设置背景图
      type:String,
      default:'auto'
    },
    type_flag:{//类型 true 为背景图  false为img
      type:Boolean,
      default:false
    }
  },
  computed: {

      myBotSwiper() {
          return this.$refs.mySwiper.swiper
      }
  },

  methods:{
    on_bot_enter() {
        this.myBotSwiper.autoplay.stop()
    },
    on_bot_leave() {
        this.myBotSwiper.autoplay.start()
    },

  }
}
</script>
<style type="text/css" lang="scss" scoped="scoped">
.brand-list-box{
  // overflow: hidden;
  height: 100%;
}
.swiper-box{
  // width: 100%;
  // min-height: 200px;
  // background-color: red;
  // position: relative;
  // left: 50%;
  // transform: translateX(-50%);

}
.brand-list-box{
  overflow: hidden;
}
a{
  display: block;
  // width: 100%!important;
}
img{
  width: 100%;
}
.swiper-wrapper{

}
</style>
